<template>
  <div id="index">
    <div class="index-center">
      <!-- 1F 轮播图 -->
      <swiper
        ref="mySwiper"
        @mouseover.native="mouseover"
        @mouseout.native="mouseout"
        class="swiper"
        :options="swiperOption"
      >
        <swiper-slide class="swiper-slide">
          <img class="lb" src="../../public/index_img/1920x800.jpg" alt="" />
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <img class="lb" src="../../public/index_img/banner2.png" alt="" />
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <img class="lb" src="../../public/index_img/banner3.png" alt="" />
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <img class="lb" src="../../public/index_img/banner1_pc.png" alt="" />
        </swiper-slide>
        <!-- 分页器 轮播图下面的小圆点 -->
        <div class="swiper-pagination my-bullet" slot="pagination"></div>
      </swiper>
      <!-- 2F 业务范围 -->
      <div class="F2">
        <!-- 图片区 -->
        <div class="f2-1">
          <img src="../../public/index_img/title1.png" alt="" />
        </div>
        <!-- 业务范围 链接 -->
        <div class="f2-2">
          <a href="#">
            <img class="ywicon" src="../../public/index_img/dz.png" alt="" />
            <div class="ywname">全屋定制</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
          <a href="#">
            <img class="ywicon" src="../../public/index_img/jzgz.png" alt="" />
            <div class="ywname">精装改造</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
          <a href="#">
            <img class="ywicon" src="../../public/index_img/jj.png" alt="" />
            <div class="ywname">成品家具</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
          <a href="#">
            <img class="ywicon" src="../../public/index_img/clrs.png" alt="" />
            <div class="ywname">窗帘</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
          <a href="#">
            <img
              class="ywicon"
              src="../../public/index_img/homelight.png"
              alt=""
            />
            <div class="ywname">灯具</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
          <a href="#">
            <img
              class="ywicon"
              src="../../public/index_img/decorations.png"
              alt=""
            />
            <div class="ywname">软饰</div>
            <div class="subtitle">customization</div>
            <!-- <div class="desc">定制衣柜、定制家具<br />榻榻米、洗衣柜</div> -->
            <img class="enter" src="../../public/index_img/enter.png" alt="" />
          </a>
        </div>
      </div>
      <!-- 3F 软装效果轮播图 -->
      <div class="F3">
        <!-- 背景图 -->
        <div class="pic-bg">
          <img class="bg" src="../../public/index_img/zp_bg.png" alt="" />
        </div>
        <!-- 内容部分 -->
        <div class="f3-body">
          <!-- 标题图 -->
          <div class="title2">
            <img src="../../public/index_img/title2.png" alt="" />
          </div>
          <!-- 轮播图 -->
          <div class="swiper2">
            <swiper
              class="swi2"
              ref="mySwi"
              @mouseover.native="over"
              @mouseout.native="out"
              :options="swiperOptionTwo"
            >
              <swiper-slide class="swiper-2">
                <img src="../../public/index_img/zp1.png" alt="" />
              </swiper-slide>
              <swiper-slide class="swiper-2">
                <img src="../../public/index_img/zp2.png" alt="" />
              </swiper-slide>
              <swiper-slide class="swiper-2">
                <img src="../../public/index_img/zp3.png" alt="" />
              </swiper-slide>
              <div class="swiper-paginationtwo" slot="pagination"></div>
            </swiper>
          </div>
          <!--预约入口 此处为跳转链接 -->
          <div class="yy">
            <img src="../../public/index_img/yy_icon.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 4F 精装房软装案例 -->
      <div class="F4">
        <!-- 标题图 -->
        <div class="title3">
          <img src="../../public/index_img/title3.png" alt="" />
        </div>
        <!-- 轮播图 此处轮播图为超链接 -->
        <div class="swiper3">
          <swiper
            class="swi3"
            ref="mySwi"
            @mouseover.native="over"
            @mouseout.native="out"
            :options="swiperOptionThree"
          >
            <swiper-slide class="swiper-3">
              <img src="../../public/index_img/eg1.png" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-3">
              <img src="../../public/index_img/eg2.png" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-3">
              <img src="../../public/index_img/eg3.png" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-3">
              <img src="../../public/index_img/eg4.png" alt="" />
            </swiper-slide>
            <swiper-slide class="swiper-3">
              <img src="../../public/index_img/eg5.png" alt="" />
            </swiper-slide>
            <div class="swiper-paginationthree" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>

      <!-- F5 服务体系 -->
      <div class="F5">
        <!-- 左侧图片 -->
        <div class="left-img">
          <img src="../../public/index_img/fwtx_bg.png" alt="" />
        </div>
        <!-- 右侧文字部分 -->
        <div class="right-detail">
          <div class="top-img">
            <img src="../../public/index_img/title5.png" alt="" />
          </div>
          <div class="bottom-detail">
            <p>
              <b>· 行业首推“全能型规划师”：</b
              >从规划、软装、柜体、深化实现完美还原落地
            </p>
            <p>
              <b>· N+1精装立体设计系统：</b
              >一个团队服务一个家庭，让精装房装修更省心
            </p>
            <p>
              <b>· 管家式托管服务：</b
              >全案设计服务、精装改造+施工、全球F2C直采价格直省30%、配送+安装+摆场+交付全流程把控
            </p>
            <p>
              <b>· 全品类无忧售后：</b>24小时响应、品质质保、客服回访
              、统一售后服务
            </p>
            <div class="f5-btn">
              <a href="#">探索更多 ></a>
            </div>
          </div>
        </div>
      </div>

      <!-- F6 -->
      <div class="F6">
        <img src="../../public/index_img/f2c.png" alt="" />
        <!-- 跳转链接 定位咋图片底部的btn处 -->
        <a class="link" href="#"></a>
      </div>

      <!-- F7 -->
      <div class="F7">
        <div class="F7-1">
          <img src="../../public/index_img/title7.png" alt="" />
        </div>
        <div class="F7-2">
          <img src="../../public/index_img/zy1.png" alt="" />
        </div>
        <div class="F7-3">
          <img src="../../public/index_img/zy2.png" alt="" />
        </div>
      </div>

      <!-- F8 关于我们 -->
      <div class="F8">
        <!-- title8 -->
        <div class="title8">
          <img src="../../public/index_img/title8.png" alt="" />
        </div>
        <!-- 关于我们 -->
        <div class="about-us">
          <!-- 左侧图片 -->
          <div class="left-us">
            <img src="../../public/index_img/about_us.png" alt="" />
          </div>
          <!-- 右侧文字部分 -->
          <div class="right-us">
            <div class="right-us-topimg">
              <img src="../../public/index_img/logo_us.png" alt="" />
            </div>
            <p>
              成都致美筑家家居装饰有限公司，简称致美优家，秉承着兄弟品牌U家工场为极致服务体验而生的理念，率先提出精装房美学整配的概念，致力于解决当下精装房业主家居消费服务体验过程中的诸多痛点。
            </p>
            <p>
              成立专注于服务精装房全屋家居团队，囊括顾问、规划师、定制设计师、交付管家等；同时期1600㎡的美学体验馆对外开放，经过两年时间发展，已成为成都精装房市场的领导品牌。2020.12.12全新1100㎡家居生活体验馆在富森美家居1号软装馆7楼盛大开业。
              目前，致美优家已服务5000+成都精装房业主，提供全屋家居整体软装，实现从设计、精装改造，到定制柜体、成品家具、窗帘、灯具、软饰摆场，交付入住的一站式省心服务。
            </p>
          </div>
        </div>
        <!-- 下方按钮 按钮连接到整体软装 -->
        <div class="btn-us">
          <img src="../../public/index_img/us_icon.png" alt="" />
        </div>
      </div>

      <!-- F9 展厅部分 -->
      <div class="F9">
        <img src="../../public/index_img/zt.png" alt="">
        <!-- 跳转链接 定位咋图片底部的btn处 -->
        <a class="f9-link" href="https://www.bestyoujia.com/activities/vrcopy.html"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        //特效: fade渐变  cube立方体  coverflow  flip
        effect: "fade",
        autoplay: {
          delay: 3500, //滚动间隔时长
          // 用户操作swiper之后,是否要停止自动滚动. 默认true
          disableOnInteraction: false,
        },
        loop: true, //是否循环滚动
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //可以点击
        },
      },
      swiperOptionTwo: {
        //特效: fade渐变  cube立方体  coverflow  flip
        // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        effect: "slide",
        autoplay: {
          delay: 3000, //滚动间隔时长
          // 用户操作swiper之后,是否要停止自动滚动. 默认true
          disableOnInteraction: false,
        },
        loop: true, //是否循环滚动
        pagination: {
          el: ".swiper-paginationtwo",
          clickable: true, //可以点击
        },
      },
      swiperOptionThree: {
        //特效: fade渐变  cube立方体  coverflow  flip
        // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        effect: "slide",
        autoplay: {
          delay: 3000, //滚动间隔时长
          // 用户操作swiper之后,是否要停止自动滚动. 默认true
          disableOnInteraction: false,
        },
        loop: true, //是否循环滚动
        pagination: {
          el: ".swiper-paginationthree",
          clickable: true, //可以点击
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  methods: {
    // 与鼠标悬浮 和 离开事件绑定
    mouseover() {
      // console.log('鼠标进入')
      // 问题: 如何获取到 swiper 元素?
      // ref: 直接把变量和元素绑定, 用$refs进行读取
      // console.log(this.$refs)
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    mouseout() {
      // console.log('鼠标离开')
      this.$refs.mySwiper.$swiper.autoplay.start();
    },
    over() {
      this.$refs.mySwi.$swiper.autoplay.stop();
    },
    out() {
      this.$refs.mySwi.$swiper.autoplay.start();
    },
  },
};
</script>

<style lang="scss">
#index {
  .index-center {
    width: 100%;
    margin: auto;
    .swiper {
      width: 100%;

      .swiper-slide {
        width: 100%;
        text-align: center;

        .lb {
          width: 100%;
        }
      }
      .swiper-pagination {
        .swiper-pagination-bullet {
          background: rgba(200, 200, 200, 0.6);
          opacity: 1;
          border-radius: 5px;
          width: 90px;
          height: 3px;
          margin: 0 10px;
        }

        .swiper-pagination-bullet-active {
          background: #ffffff;
        }
      }
    }

    .F2 {
      width: 100%;
      .f2-1 {
        width: 100%;
        text-align: center;
        margin: 30px auto;
      }
      .f2-2 {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        // padding-bottom: 50px;
        margin: 0 30px;

        a {
          display: flex;
          flex: 1;
          flex-direction: column;
          align-items: center;
          border: 1px solid #cccccc;
          text-decoration: none;
          padding: 60px 0;
          position: relative;

          .ywname {
            color: #333333;
            font-size: 24px;
            margin: 10px 0;
          }
          .subtitle {
            color: #999999;
            font-size: 12px;
          }

          .enter {
            position: absolute;
            bottom: -15px;
          }
        }
      }
    }

    .F3 {
      width: 100%;
      position: relative;
      margin-top: 30px;
      padding: 60px 0 0;

      .pic-bg {
        width: 100%;
        // margin-top: 0;
        .bg {
          // padding: 60px 0;
          width: 100%;
          height: 906px;
        }
      }

      .f3-body {
        width: 100%;

        .title2 {
          width: 100%;
          position: absolute;
          top: 140px;
          text-align: center;
        }

        .swiper2 {
          width: 100%;
          position: absolute;
          bottom: 80px;

          .swi2 {
            margin: 0 auto;
            text-align: center;
            position: relative;
          }
          .swiper-paginationtwo {
            position: absolute;
            z-index: 1;
            bottom: 10px;
            left: 140px;
            .swiper-pagination-bullet {
              background: rgba(200, 200, 200, 0.6);
              opacity: 1;
              border-radius: 50%;
              width: 10px;
              height: 10px;
              margin: 0 5px;
            }

            .swiper-pagination-bullet-active {
              background: #ffffff;
            }
          }
        }

        .yy {
          position: absolute;
          bottom: 85px;
          right: 110px;
        }
      }
    }

    .F4 {
      width: 100%;
      padding: 80px 0;

      .title3 {
        width: 100%;
        text-align: center;
        // padding: 50px 0;
        padding-bottom: 50px;
      }

      .swiper3 {
        width: 100%;
        .swi3 {
          margin: 0 auto;
          text-align: center;
          position: relative;

          .swiper-3 {
            width: 100%;
            img {
              width: 90%;
            }
          }

          .swiper-paginationthree {
            position: absolute;
            z-index: 1;
            bottom: 20px;
            .swiper-pagination-bullet {
              background: rgba(200, 200, 200, 0.6);
              opacity: 1;
              border-radius: 50%;
              width: 10px;
              height: 10px;
              margin: 0 5px;
            }

            .swiper-pagination-bullet-active {
              background: #ffffff;
            }
          }
          .swiper-button-prev {
            color: #ffffff;
            position: absolute;
            left: 80px;
          }
          .swiper-button-next {
            color: #ffffff;
            position: absolute;
            right: 80px;
          }
        }
      }
    }

    .F5 {
      width: 100%;
      display: flex;
      position: relative;

      .right-detail {
        position: absolute;
        top: 100px;
        right: 40px;
        width: 260px;
        .top-img {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .bottom-detail {
          width: 100%;
          p {
            font-size: 18px;
            margin: 20px 0;
          }
          .f5-btn {
            width: 160px;
            height: 50px;
            background: #93412c;
            padding: 15px 40px;
            color: #ffffff;
            text-align: center;
            line-height: 50px;

            a {
              color: #ffffff;
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }

    .F6 {
      width: 100%;
      text-align: center;
      margin-top: 60px;
      position: relative;
      // text-align: center;

      .link {
        width: 200px;
        height: 50px;
        // background-color: red;
        position: absolute;
        bottom: 10px;
        left: 610px;
      }
    }

    .F7 {
      width: 100%;
      // margin: 0 auto;
      text-align: center;
      .F7-1 {
        margin-top: 60px;
      }
    }

    .F8 {
      width: 100%;
      background-color: #93412c;
      margin-top: 80px;

      .title8 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding-top: 60px;
      }
      .about-us {
        width: 100%;
        display: flex;
        // justify-content: space-evenly;

        .left-us {
          // width: 60%;
          margin: 50px 60px 50px 40px;
        }

        .right-us {
          width: 600px;
          margin-top: 50px;
          margin-right: 50px;

          .right-us-topimg {
            width: 100%;
            // text-align: center;
            margin-bottom: 45px;
          }
          p {
            align-items: center;
            color: #ffffff;
            line-height: 40px;
            font-size: 16px;
          }
        }
      }
      .btn-us{
        width: 100%;
        text-align: center;
        padding-bottom: 50px;
      }
    }

    .F9{
      width: 100%;
      position: relative;
      // 展厅背景图
      img{
        width: 100%;
        display: block;
      }
      .f9-link{
        // background-color: yellow;
        position: absolute;
        width: 200px;
        height: 40px;
        bottom: 230px;
        left: 610px;
        // a{
        //   width: 100%;
        //   height: 100%;
        // }
      }
    }
  }
}
</style>


